<template>
    <div>
      <!--<header-tilte :title="title"></header-tilte>-->
      <div class="header flex">
        <div style="width: 10%" v-on:click="infoMoveHistory">
          <img style="width: 1.25rem;height: 1.25rem" src="../../assets/img/left.png">
        </div>
        <div style="width: 80%">
          <span>{{title}}</span>
        </div>
        <div style="width: 10%"></div>
      </div>
      <div class="flex_center">
        <div class="bodyContent">
          <p class="infoMoveWarnning">
            <i class="fa fa-bell-o"></i>
            受移交人微信扫二维码,关注进商城【我的个人中心】查看ID
          </p>
          <mu-container class="phoneC_content">
            <mu-form ref="form" :model="infoMove" class="mu-demo-form" :label-position="labelPosition" label-width="100">
              <mu-form-item prop="move_id" label="受移交人ID" :rules="moveIdRules" class="margin_bom0" style="text-align: left">
                <mu-text-field v-model="infoMove.move_id" prop="move_id"></mu-text-field>
              </mu-form-item>
              <mu-form-item prop="captcha" label="获取验证码" :rules="captchaRules" class="positon_re margin_bom0" style="text-align: left">
                <mu-text-field v-model="infoMove.captcha" prop="captcha"></mu-text-field>
                <div class="InfoMoveCaptchaBotton positon_ab">
                  <mu-button color="primary" v-if="countDownTime <=0" @click="getCode()">获取动态码</mu-button>
                  <mu-button disabled v-if="countDownTime >0">发送动态码({{countDownTime}}s)</mu-button>
                </div>
              </mu-form-item>
              <mu-form-item prop="name" label="受移交人姓名" :rules="nameRules" class="margin_bom0" style="text-align: left">
                <mu-text-field v-model="infoMove.name" prop="name"></mu-text-field>
              </mu-form-item>
              <mu-form-item prop="mobile" label="受移交人手机" :rules="mobileRules" class="margin_bom0" style="text-align: left">
                <mu-text-field v-model="infoMove.mobile" prop="mobile"></mu-text-field>
              </mu-form-item>
              <mu-form-item class="infomove_button">
                <mu-button color="primary" @click="submit">提交</mu-button>
                <!--<mu-button @click="clear">重置</mu-button>-->
              </mu-form-item>
            </mu-form>
          </mu-container>
          <div class="infoMoveComfirm flex_center" style="display: none">
            <div class="comfirm_center">
              <div class='comfirm_content'>
                <h3 style="font-size: 1rem">请确认以下信息</h3>
                <p class="comfirm_p" style="margin-top: 0.3rem">受移交人ID：<span style="color: orange">{{infoMove.move_id}}</span></p>
                <p class="comfirm_p">受移交人姓名：<span style="color: orange">{{infoMove.name}}</span></p>
                <p class="comfirm_p">受移交人手机：<span style="color: orange">{{infoMove.mobile}}</span></p>
                <p style="color: orange;font-size: 0.7rem">注意：该操作不可逆，请谨慎操作</p>
                <span class="comfirm_bor"></span>
                <div class="flex flex_around">
                  <span @click="closeComfirm">取消</span>
                  <span style="color: #2196f3" @click="sureInfoMove">确认</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Rules from '../../components/Rules'
    export default {
      data(){
        return{
          title:'账号移交',
          labelPosition: 'left',
          infoMove: {
            move_id: '',
            captcha: '',
            name: '',
            mobile:'',
          },
          countDownTime:0,
          moveIdRules: [
            { validate: (val) => Rules.required(val), message: '请填写受移交人ID'},
          ],
          captchaRules: [
            { validate: (val) => Rules.required(val), message: '请填写验证码'},
          ],
          nameRules: [
            { validate: (val) => Rules.required(val), message: '请填写受移交人姓名'},
          ],
          mobileRules: [
            { validate: (val) => Rules.required(val), message: '请填写受移交人手机号'},
            { validate: (val) => Rules.phone(val), message: '手机号格式错误'},
          ],
        }
      },
      mounted(){
        this.checkLogin();
        var infoMove = this.getCache('infoMove');
        if(!this.isEmpty(infoMove)){
          this.infoMove = infoMove;
        }
      },
      methods:{
        closeComfirm(){
          $('.infoMoveComfirm').hide()
        },

        submit () {
          this.$refs.form.validate().then((result) => {

            if(result == true){//验证通过
              //弹框是否确定迁号
              $('.infoMoveComfirm').show();
            }
          });
        },

        sureInfoMove(){
          this.closeComfirm();
          var _lsef = this;
          this.yesS.addInfoMation(
            this.$combineParams({
              move_id:this.infoMove.move_id,
              captcha:this.infoMove.captcha,
              name:this.infoMove.name,
              mobile:this.infoMove.mobile
            })
          ).then(res => {
            this.deleteCache('infoMove');
            if(res.status == 1){
              setTimeout(function () {
                _lsef.$router.push({path:'/qds/personall'})
              },2000)
            }
          })
        },


        getCode(){
          //判断是否绑定手机号，未绑定则跳转到绑定手机号页面
          var login = this.getCache('login_key');
          if(this.isEmpty(login) || this.isEmpty(login.mobile)){
            this.$confirm('您还未绑定手机号，不能进行账号移交操作，即刻绑定', '提示', {
              type: 'warning'
            }).then(({ result }) => {
              if (result) {
                this.setCache('infoMove',this.infoMove);
                this.$router.push({'path':'/qds/phoneCheck',query:{type:1}});
              }
            });
          }else {
            var _self = this;
            //生成倒计时
            this.yesS.memberCaptcha(
              this.$comParams()
            ).then(res => {
              console.log(res)
              //生成倒计时
              _self.countDownTime = res.sms_time;
              var intervarId = setInterval(function () {
                _self.countDownTime--;
                if(_self.countDownTime <= 0){
                  clearInterval(intervarId);
                }
              }, 1000);
            })
          }
        },
        infoMoveHistory(){
          this.deleteCache('infoMove');
          this.$router.push({'path':'/qds/personall'});
        }
      },
      components: {HeaderTilte},
      name: "info-move"
    }
</script>

<style scoped>
  @import "css/infoMove.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .header{
    width: 100%;
    padding: 0.5rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #c3c3c3;
    background: #fff;
    position: relative;
  }
  .header img{
    width: 1.25rem;
    height: 1.25rem;
  }
</style>
